<template>
  <div class="vk-dropdown">
    <Tooltip
      :trigger="trigger"
      :placement="placement"
      :popper-options="popperOptions"
      :open-delay="openDelay"
      :close-delay="closeDelay"
      :manual="manual"
      @visible-change="visibleChange"
      ref="tooltipRef"
    >
      <slot />
      <template #content>
        <ul class="vk-dropdown__menu">
          <template v-for="item in menuOptions" :key="item.key">
            <li v-if="item.divided" role="separator" class="divided-placeholder" />
            <li
              :id="`dropdown-item-${item.key}`"
              class="vk-dropdown__item"
              :class="{ 'is-disabled': item.disabled, 'is-divided': item.divided }"
              @click="itemClick(item)"
            >
              <RenderVnode :vNode="item.label" />
            </li>
          </template>
        </ul>
      </template>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { DropdownProps, DropdownInstance, DropdownEmits, MenuOption } from "./types";
import Tooltip from "../Tooltip/Tooltip.vue"; // 工具提示组件
import RenderVnode from "../Common/RenderVnode"; // VNode渲染组件
import type { TooltipInstance } from "../Tooltip/types";

// 设置组件名称（用于DevTools调试）
defineOptions({
  name: "VkDropdown",
});

// 组件属性定义（带有默认值）
const props = withDefaults(defineProps<DropdownProps>(), {
  hideAfterClick: true, // 点击后自动隐藏菜单，默认开启
});

// 组件事件定义
const emits = defineEmits<DropdownEmits>();

// Tooltip 组件实例引用
const tooltipRef = ref<TooltipInstance | null>(null);

// 处理菜单显示状态变化事件
const visibleChange = (e: boolean) => {
  emits("visible-change", e);
};

// 菜单项点击事件处理
const itemClick = (e: MenuOption) => {
  if (e.disabled) return; // 禁用项不处理

  emits("select", e); // 触发选择事件

  // 根据配置决定是否在点击后隐藏菜单
  if (props.hideAfterClick) {
    tooltipRef.value?.hide();
  }
};

// 暴露组件方法给父组件使用
defineExpose<DropdownInstance>({
  show: () => tooltipRef.value?.show(), // 显示菜单
  hide: () => tooltipRef.value?.hide(), // 隐藏菜单
});
</script>
